<script setup lang="ts">
import mapboxgl from "mapbox-gl";
import { onMounted } from "vue";
//引入语言包插件
import MapboxLanguage from "@mapbox/mapbox-gl-language";
//引入百度转wgs84方法
import { bd09towgs84 } from "@/utils/PrjTransformer.js";

//设置token
mapboxgl.accessToken = "xxxxxx";
let map: any = null;

onMounted(() => {
  map = new mapboxgl.Map({
    //指定用来装载地图的DOM容器的id
    container: "map",
    //街道地图
    style: "mapbox://styles/mapbox/streets-v12",
    // //户外地图
    // style: "mapbox://styles/mapbox/outdoors-v12",
    // //灰白色地图
    // style: "mapbox://styles/mapbox/light-v11",
    // //暗黑色地图
    // style: "mapbox://styles/mapbox/dark-v11",
    // //卫星地图，无注记
    // style: "mapbox://styles/mapbox/satellite-v9",
    // //卫星地图，有注记
    // style: "mapbox://styles/mapbox/satellite-streets-v12",
    // //导航地图，白天
    // style: "mapbox://styles/mapbox/navigation-day-v1",
    // //导航地图，夜晚
    //style: "mapbox://styles/mapbox/navigation-night-v1",

    //指定默认视图中心点的经纬度
    center: [106, 29],
    //指定默认视图的放大层级
    zoom: 9,
  });

  //将当前Mapbox底图的语言设置为中文简体
  const language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });
  map.addControl(language);

  //添加导航条
  const nav = new mapboxgl.NavigationControl();
  map.addControl(nav, "top-right");
  //添加比例尺
  const scale = new mapboxgl.ScaleControl();
  map.addControl(scale, "bottom-left");

  //添加全屏按钮
  const fullScreen = new mapboxgl.FullscreenControl();
  map.addControl(fullScreen, "top-right");

  //默认样式加载完成后，添加图层
  map.on("style.load", () => {
    map.addSource("mapbox-dem", {
      type: "raster-dem",
      //这里加载mapbox官方提供的地形数据地址，可替换为自己的地形切片地址
      url: "mapbox://mapbox.mapbox-terrain-dem-v1",
      tileSize: 512,
      maxzoom: 14,
    });
    map.setTerrain({
      source: "mapbox-dem",
      //地形夸张比例，越大，起伏效果越明显
      exaggeration: 1.5,
    });

    const transAfter = bd09towgs84(106, 29);
    console.log(transAfter);
    addOriginPoint(106,29);
    addTransAfterPoint(transAfter[0],transAfter[1]);
  });
});


//添加原始百度坐标系点
function addOriginPoint(lng, lat) {
  const pointObj = { type: "Point", coordinates: [lng, lat] };
  map.addSource("point", {
    type: "geojson",
    data: {
      type: "Feature",
      properties: { },
      geometry: pointObj,
    },
  });
  //添加图层
  map.addLayer({
    id: "point",
    source: "point",
    type: "circle",
    paint: {
      "circle-radius": 10,
      "circle-color": "#ff0000",
      "circle-stroke-color": "blue",
      "circle-stroke-width": 5,
      "circle-blur": 0,
    },
  });
}

//添加转化为wgs84坐标系后的点
function addTransAfterPoint(lng, lat){
  const pointObj = { type: "Point", coordinates: [lng, lat] };
  map.addSource("pointTrans", {
    type: "geojson",
    data: {
      type: "Feature",
      properties: { },
      geometry: pointObj,
    },
  });
  //添加图层
  map.addLayer({
    id: "pointTrans",
    source: "pointTrans",
    type: "circle",
    paint: {
      "circle-radius": 10,
      "circle-color": "#FF8C00",
      "circle-stroke-color": "blue",
      "circle-stroke-width": 5,
      "circle-blur": 0,
    },
  });
}
</script>

<template>
  <div id="map" class="map"></div>
</template>

<style>
.map {
  flex: 1;
}
</style>
